Requirements
Tested with:
moment 2.2.1
jquery 1.9.1
Examples
var $fp = $( ".filthypillow-1" ),
now = moment( ).subtract( "seconds", 1 );
$fp.filthypillow( {
minDateTime: function( ) {
return now;
}
} );
$fp.on( "focus", function( ) {
$fp.filthypillow( "show" );
} );
$fp.on( "fp:save", function( e, dateObj ) {
$fp.val( dateObj.format( "MMM DD YYYY hh:mm A" ) );
$fp.filthypillow( "hide" );
} );Hotkeys
enter (save)
left-right arrows/tab (switch steps)
up-down arrows (change digits)
number keys (change digits)
Configuration
startStep
Step that should be active on initialization.
month, day, hour, minute, meridiem
Default
day
initialDateTime
Set the initial date time to be shown.
Default
null
Example
initialDateTime: function( m ) {
return m.add( "day", 7 );
}minDateTime
Set the earliest time that can be selected.
Default
null
Example
minDateTime: function( ) {
return moment( ).subtract( "days", 1 ); //one day ago
}maxDateTime
Set the latest time that can be selected.
Default
null
Example
maxDateTime: function( ) {
return moment( ).add( "days", 7 ); //7 days from now
}steps
Disable/enable steps by passing an array. Removing steps will prevent the user from activating that step (by clicking or using left/right arrows), but it will not hide the step (which should be done in CSS).
Default
[ "month", "day", "hour", "minute", "meridiem" ]
exitOnBackgroundClick
If the user clicks anywhere outside filthypillow (except for when the object has a class prepended with fp-), it will hide filthypillow.
Default
true
enableCalendar
Show the calendar when steps day or month are activated.
Default
true
calendar.saveOnDateSelect
Trigger save when an active date is selected within a calendar. This excludes date changes triggered from changing the month or selecting a date in a different month.
Default
false
Example
calendar: {
saveOnDateSelect: true
}calendar.isPinned
Keep the calendar showing even when the user has selected the hours, minutes, meridiem boxes.
Default
false
Example
calendar: {
isPinned: true
}Events
fp:save
Passes selected date object.
$( ".datetime" ).filthypillow( );
$( ".datetime" ).on( "fp:save", function( e, dateObj ) {
console.info( dateObj );
} );API
show( )
hide( )
destroy( )
updateDateTime( dateObj )
changeDateTimeUnit( unit, value )
setTimeZone( zone )
getDate( ): DateObj
isValid( ): Boolean
Tests
Run tests here.